<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YH WebView 测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 16px;
        }
        
        .content {
            padding: 30px;
        }
        
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e1e5e9;
            border-radius: 12px;
            background: #f8f9fa;
        }
        
        .section h2 {
            color: #333;
            margin-bottom: 15px;
            font-size: 20px;
            border-bottom: 2px solid #667eea;
            padding-bottom: 8px;
        }
        
        .data-display {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            margin-bottom: 15px;
        }
        
        .data-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .data-item:last-child {
            border-bottom: none;
        }
        
        .data-label {
            font-weight: 600;
            color: #495057;
        }
        
        .data-value {
            color: #667eea;
            font-weight: 500;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background: #5a6fd8;
            transform: translateY(-2px);
        }
        
        .btn-success {
            background: #28a745;
            color: white;
        }
        
        .btn-success:hover {
            background: #218838;
            transform: translateY(-2px);
        }
        
        .btn-warning {
            background: #ffc107;
            color: #212529;
        }
        
        .btn-warning:hover {
            background: #e0a800;
            transform: translateY(-2px);
        }
        
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c82333;
            transform: translateY(-2px);
        }
        
        .btn-info {
            background: #17a2b8;
            color: white;
        }
        
        .btn-info:hover {
            background: #138496;
            transform: translateY(-2px);
        }
        
        .status {
            padding: 10px;
            border-radius: 6px;
            margin-top: 15px;
            font-size: 14px;
        }
        
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .input-group {
            margin-bottom: 15px;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #495057;
        }
        
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .input-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            max-height: 200px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #495057;
        }
        
        .log-item {
            margin-bottom: 5px;
            padding: 3px 0;
        }
        
        .log-time {
            color: #6c757d;
            font-size: 11px;
        }
        
        .log-message {
            color: #495057;
        }
        
        .log-error {
            color: #dc3545;
        }
        
        .log-success {
            color: #28a745;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎮 YH WebView 测试页面</h1>
            <p>Flutter 与 WebView 双向通信演示</p>
        </div>
        
        <div class="content">
            <!-- 用户信息区域 -->
            <div class="section">
                <h2>👤 用户信息</h2>
                <div class="data-display" id="userInfo">
                    <div class="data-item">
                        <span class="data-label">用户ID:</span>
                        <span class="data-value" id="userId">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">用户名:</span>
                        <span class="data-value" id="userName">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">等级:</span>
                        <span class="data-value" id="userLevel">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">分数:</span>
                        <span class="data-value" id="userScore">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">VIP状态:</span>
                        <span class="data-value" id="userVip">-</span>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="btn btn-primary" onclick="getUserInfo()">获取用户信息</button>
                    <button class="btn btn-success" onclick="updateUserInfo()">更新用户信息</button>
                </div>
                
                <div class="input-group">
                    <label for="newUserName">新用户名:</label>
                    <input type="text" id="newUserName" placeholder="输入新用户名">
                </div>
                
                <div id="userStatus" class="status" style="display: none;"></div>
            </div>
            
            <!-- 游戏状态区域 -->
            <div class="section">
                <h2>🎯 游戏状态</h2>
                <div class="data-display" id="gameInfo">
                    <div class="data-item">
                        <span class="data-label">当前关卡:</span>
                        <span class="data-value" id="gameLevel">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">剩余生命:</span>
                        <span class="data-value" id="gameLives">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">金币数量:</span>
                        <span class="data-value" id="gameCoins">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">经验值:</span>
                        <span class="data-value" id="gameExp">-</span>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="btn btn-success" onclick="collectCoin(10)">收集10金币</button>
                    <button class="btn btn-warning" onclick="loseLife()">失去生命</button>
                    <button class="btn btn-info" onclick="levelUp()">升级</button>
                    <button class="btn btn-primary" onclick="buyItem('sword', 100)">购买武器(100金币)</button>
                </div>
                
                <div id="gameStatus" class="status" style="display: none;"></div>
            </div>
            
            <!-- 页面数据区域 -->
            <div class="section">
                <h2>📄 页面数据</h2>
                <div class="data-display" id="pageInfo">
                    <div class="data-item">
                        <span class="data-label">主题:</span>
                        <span class="data-value" id="pageTheme">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">语言:</span>
                        <span class="data-value" id="pageLanguage">-</span>
                    </div>
                    <div class="data-item">
                        <span class="data-label">时间戳:</span>
                        <span class="data-value" id="pageTimestamp">-</span>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="btn btn-primary" onclick="getPageData()">获取页面数据</button>
                    <button class="btn btn-success" onclick="setPageData()">设置页面数据</button>
                </div>
                
                <div class="input-group">
                    <label for="newTheme">新主题:</label>
                    <input type="text" id="newTheme" placeholder="输入新主题 (light/dark)">
                </div>
                
                <div id="pageStatus" class="status" style="display: none;"></div>
            </div>
            
            <!-- 支付测试区域 -->
            <div class="section">
                <h2>💳 支付测试</h2>
                <div class="button-group">
                    <button class="btn btn-success" onclick="requestPayment('coins', 100)">购买100金币</button>
                    <button class="btn btn-info" onclick="requestPayment('vip', 30)">购买VIP(30元)</button>
                </div>
                
                <div id="paymentStatus" class="status" style="display: none;"></div>
            </div>
            
            <!-- 导航测试区域 -->
            <div class="section">
                <h2>🧭 导航测试</h2>
                <div class="button-group">
                    <button class="btn btn-primary" onclick="navigateTo('home')">返回首页</button>
                    <button class="btn btn-info" onclick="navigateTo('profile')">个人资料</button>
                    <button class="btn btn-warning" onclick="navigateTo('settings')">设置</button>
                </div>
            </div>
            
            <!-- 日志区域 -->
            <div class="section">
                <h2>📝 操作日志</h2>
                <div class="log" id="logContainer">
                    <div class="log-item">
                        <span class="log-time">[系统]</span>
                        <span class="log-message">页面加载完成，等待Flutter数据...</span>
                    </div>
                </div>
                <button class="btn btn-secondary" onclick="clearLog()">清空日志</button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let flutterData = null;
        let logContainer = null;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            logContainer = document.getElementById('logContainer');
            addLog('页面初始化完成', 'info');
            
            // 等待Flutter数据
            if (window.onFlutterDataReady) {
                window.onFlutterDataReady = function(data) {
                    flutterData = data;
                    addLog('收到Flutter初始数据', 'success');
                    updateAllDisplays();
                };
            }
            
            // 监听Flutter数据更新
            if (window.onGameStateUpdate) {
                window.onGameStateUpdate = function(gameData) {
                    addLog('游戏状态更新: ' + JSON.stringify(gameData), 'info');
                    updateGameDisplay(gameData);
                };
            }
            
            if (window.onUserDataUpdate) {
                window.onUserDataUpdate = function(userData) {
                    addLog('用户数据更新: ' + JSON.stringify(userData), 'info');
                    updateUserDisplay(userData);
                };
            }
            
            // 监听Flutter事件
            if (window.FlutterBridge) {
                window.FlutterBridge.on('gameStateChanged', function(data) {
                    addLog('游戏状态变化事件: ' + JSON.stringify(data), 'info');
                });
                
                window.FlutterBridge.on('userDataChanged', function(data) {
                    addLog('用户数据变化事件: ' + JSON.stringify(data), 'info');
                });
            }
        });
        
        // 添加日志
        function addLog(message, type = 'info') {
            if (!logContainer) return;
            
            const time = new Date().toLocaleTimeString();
            const logItem = document.createElement('div');
            logItem.className = 'log-item';
            
            const timeSpan = document.createElement('span');
            timeSpan.className = 'log-time';
            timeSpan.textContent = `[${time}] `;
            
            const messageSpan = document.createElement('span');
            messageSpan.className = `log-message log-${type}`;
            messageSpan.textContent = message;
            
            logItem.appendChild(timeSpan);
            logItem.appendChild(messageSpan);
            logContainer.appendChild(logItem);
            
            // 自动滚动到底部
            logContainer.scrollTop = logContainer.scrollHeight;
        }
        
        // 清空日志
        function clearLog() {
            if (logContainer) {
                logContainer.innerHTML = '';
                addLog('日志已清空', 'info');
            }
        }
        
        // 显示状态消息
        function showStatus(elementId, message, type) {
            const element = document.getElementById(elementId);
            if (element) {
                element.textContent = message;
                element.className = `status ${type}`;
                element.style.display = 'block';
                
                // 3秒后自动隐藏
                setTimeout(() => {
                    element.style.display = 'none';
                }, 3000);
            }
        }
        
        // 更新所有显示
        function updateAllDisplays() {
            if (flutterData) {
                updateUserDisplay(flutterData.user);
                updateGameDisplay(flutterData.game);
                updatePageDisplay(flutterData.page);
            }
        }
        
        // 更新用户信息显示
        function updateUserDisplay(userData) {
            if (userData) {
                document.getElementById('userId').textContent = userData.userId || '-';
                document.getElementById('userName').textContent = userData.userName || '-';
                document.getElementById('userLevel').textContent = userData.level || '-';
                document.getElementById('userScore').textContent = userData.score || '-';
                document.getElementById('userVip').textContent = userData.vip ? '是' : '否';
            }
        }
        
        // 更新游戏状态显示
        function updateGameDisplay(gameData) {
            if (gameData) {
                document.getElementById('gameLevel').textContent = gameData.currentLevel || '-';
                document.getElementById('gameLives').textContent = gameData.lives || '-';
                document.getElementById('gameCoins').textContent = gameData.coins || '-';
                document.getElementById('gameExp').textContent = gameData.experience || '-';
            }
        }
        
        // 更新页面数据显示
        function updatePageDisplay(pageData) {
            if (pageData) {
                document.getElementById('pageTheme').textContent = pageData.theme || '-';
                document.getElementById('pageLanguage').textContent = pageData.language || '-';
                document.getElementById('pageTimestamp').textContent = new Date(pageData.timestamp).toLocaleString() || '-';
            }
        }
        
        // 用户相关操作
        function getUserInfo() {
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('getUserInfo').then(function(result) {
                        addLog('获取用户信息成功: ' + JSON.stringify(result), 'success');
                        updateUserDisplay(result);
                        showStatus('userStatus', '获取用户信息成功', 'success');
                    }).catch(function(error) {
                        addLog('获取用户信息失败: ' + error, 'error');
                        showStatus('userStatus', '获取用户信息失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('userStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用getUserInfo失败: ' + error, 'error');
                showStatus('userStatus', '调用失败', 'error');
            }
        }
        
        function updateUserInfo() {
            const newName = document.getElementById('newUserName').value;
            if (!newName) {
                showStatus('userStatus', '请输入新用户名', 'error');
                return;
            }
            
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('updateUserInfo', {nickname: newName}).then(function() {
                        addLog('更新用户信息成功: ' + newName, 'success');
                        showStatus('userStatus', '更新用户信息成功', 'success');
                        document.getElementById('newUserName').value = '';
                    }).catch(function(error) {
                        addLog('更新用户信息失败: ' + error, 'error');
                        showStatus('userStatus', '更新失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('userStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用updateUserInfo失败: ' + error, 'error');
                showStatus('userStatus', '调用失败', 'error');
            }
        }
        
        // 游戏相关操作
        function collectCoin(amount) {
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('performGameAction', 'collectCoin', {amount: amount}).then(function() {
                        addLog('收集金币成功: ' + amount, 'success');
                        showStatus('gameStatus', '收集金币成功', 'success');
                    }).catch(function(error) {
                        addLog('收集金币失败: ' + error, 'error');
                        showStatus('gameStatus', '收集失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('gameStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用performGameAction失败: ' + error, 'error');
                showStatus('gameStatus', '调用失败', 'error');
            }
        }
        
        function loseLife() {
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('performGameAction', 'loseLife', {}).then(function() {
                        addLog('失去生命', 'warning');
                        showStatus('gameStatus', '失去生命', 'warning');
                    }).catch(function(error) {
                        addLog('操作失败: ' + error, 'error');
                        showStatus('gameStatus', '操作失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('gameStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用performGameAction失败: ' + error, 'error');
                showStatus('gameStatus', '调用失败', 'error');
            }
        }
        
        function levelUp() {
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('performGameAction', 'levelUp', {}).then(function() {
                        addLog('升级成功', 'success');
                        showStatus('gameStatus', '升级成功', 'success');
                    }).catch(function(error) {
                        addLog('升级失败: ' + error, 'error');
                        showStatus('gameStatus', '升级失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('gameStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用performGameAction失败: ' + error, 'error');
                showStatus('gameStatus', '调用失败', 'error');
            }
        }
        
        function buyItem(itemId, price) {
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('performGameAction', 'buyItem', {itemId: itemId, price: price}).then(function() {
                        addLog('购买物品成功: ' + itemId, 'success');
                        showStatus('gameStatus', '购买成功', 'success');
                    }).catch(function(error) {
                        addLog('购买物品失败: ' + error, 'error');
                        showStatus('gameStatus', '购买失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('gameStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用performGameAction失败: ' + error, 'error');
                showStatus('gameStatus', '调用失败', 'error');
            }
        }
        
        // 页面数据相关操作
        function getPageData() {
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('getPageData').then(function(result) {
                        addLog('获取页面数据成功: ' + JSON.stringify(result), 'success');
                        updatePageDisplay(result);
                        showStatus('pageStatus', '获取页面数据成功', 'success');
                    }).catch(function(error) {
                        addLog('获取页面数据失败: ' + error, 'error');
                        showStatus('pageStatus', '获取失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('pageStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用getPageData失败: ' + error, 'error');
                showStatus('pageStatus', '调用失败', 'error');
            }
        }
        
        function setPageData() {
            const newTheme = document.getElementById('newTheme').value;
            if (!newTheme) {
                showStatus('pageStatus', '请输入新主题', 'error');
                return;
            }
            
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    window.flutter_inappwebview.callHandler('setPageData', {theme: newTheme}).then(function() {
                        addLog('设置页面数据成功: ' + newTheme, 'success');
                        showStatus('pageStatus', '设置成功', 'success');
                        document.getElementById('newTheme').value = '';
                    }).catch(function(error) {
                        addLog('设置页面数据失败: ' + error, 'error');
                        showStatus('pageStatus', '设置失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('pageStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用setPageData失败: ' + error, 'error');
                showStatus('pageStatus', '调用失败', 'error');
            }
        }
        
        // 支付相关操作
        function requestPayment(type, amount) {
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    const paymentData = {
                        type: type,
                        amount: amount,
                        currency: 'CNY',
                        timestamp: Date.now()
                    };
                    
                    addLog('发起支付请求: ' + JSON.stringify(paymentData), 'info');
                    
                    window.flutter_inappwebview.callHandler('requestPayment', paymentData).then(function(result) {
                        if (result.success) {
                            addLog('支付成功: ' + result.message, 'success');
                            showStatus('paymentStatus', '支付成功: ' + result.message, 'success');
                        } else {
                            addLog('支付失败: ' + result.message, 'error');
                            showStatus('paymentStatus', '支付失败: ' + result.message, 'error');
                        }
                    }).catch(function(error) {
                        addLog('支付请求失败: ' + error, 'error');
                        showStatus('paymentStatus', '支付请求失败', 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                    showStatus('paymentStatus', 'Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用requestPayment失败: ' + error, 'error');
                showStatus('paymentStatus', '调用失败', 'error');
            }
        }
        
        // 导航相关操作
        function navigateTo(route) {
            try {
                if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
                    addLog('导航到: ' + route, 'info');
                    window.flutter_inappwebview.callHandler('navigateTo', route).then(function() {
                        addLog('导航请求已发送: ' + route, 'success');
                    }).catch(function(error) {
                        addLog('导航失败: ' + error, 'error');
                    });
                } else {
                    addLog('Flutter WebView 未初始化', 'error');
                }
            } catch (error) {
                addLog('调用navigateTo失败: ' + error, 'error');
            }
        }
        
        // 测试Flutter通信桥接
        function testFlutterBridge() {
            if (window.FlutterBridge) {
                addLog('测试Flutter通信桥接', 'info');
                
                // 发送测试数据到Flutter
                window.FlutterBridge.sendToFlutter({
                    type: 'test',
                    message: 'Hello from WebView!',
                    timestamp: Date.now()
                });
                
                // 注册测试事件
                window.FlutterBridge.on('testEvent', function(data) {
                    addLog('收到测试事件: ' + JSON.stringify(data), 'success');
                });
                
                // 触发测试事件
                window.FlutterBridge.emit('testEvent', {
                    message: 'Test event from WebView',
                    timestamp: Date.now()
                });
                
                addLog('Flutter通信桥接测试完成', 'success');
            } else {
                addLog('Flutter通信桥接未初始化', 'error');
            }
        }
        
        // 页面加载完成后自动测试
        window.addEventListener('load', function() {
            setTimeout(function() {
                if (flutterData) {
                    addLog('自动测试Flutter通信桥接', 'info');
                    testFlutterBridge();
                }
            }, 2000);
        });
    </script>
</body>
</html>
